<template>
  <div class="check-list">
    <el-button @click="resetForm" type="primary">返回</el-button>
    <el-form
      ref="elForm"
      :model="formData"
      :rules="rules"
      size="medium"
      label-width="100px"
    >
      <el-row :gutter="15">
        <el-col :span="8">
          <el-form-item label="儿童户籍地址" prop="censusRegister">
            <el-input
              v-model="formData.censusRegister"
              disabled
              placeholder="请输入儿童户籍地址"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="儿童身份证号" prop="idCard">
            <el-input
              v-model="formData.idCard"
              disabled
              placeholder="请输入儿童身份证号"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="幼儿园名称" prop="schoolName">
            <el-input
              v-model="formData.schoolName"
              disabled
              placeholder="请输入幼儿园名称"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="监护人姓名" prop="motherName">
            <el-input
              v-model="formData.motherName"
              disabled
              placeholder="请输入监护人姓名"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="监护人联系电话" prop="motherPhone">
            <el-input
              v-model="formData.motherPhone"
              disabled
              placeholder="请输入监护人联系电话"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <p>基本信息</p>
        <el-col :span="8">
          <el-form-item label="姓名" prop="name">
            <el-input
              v-model="formData.name"
              disabled
              placeholder="请输入姓名"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="姓别" prop="sex">
            <el-select
              v-model="formData.sex"
              disabled
              placeholder="请选择姓别"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="dict in dict.type.sys_user_sex"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="年龄" prop="age">
            <el-input
              v-model="formData.age"
              disabled
              placeholder="请输入年龄"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <div
          style="
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: flex-start;
          "
        >
          <el-col :span="8">
            <el-form-item label="出生日期" prop="birthday">
              <el-date-picker
                disabled
                clearable
                size="small"
                v-model="formData.birthday"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="请选择出生日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </div>
      </el-row>
      <el-row :gutter="15">
        <p>既往病史</p>
        <el-form-item prop="pastHistory">
          <el-radio-group v-model="formData.pastHistory" size="medium">
            <el-radio
              v-for="(item, index) in dict.type.past_history"
              disabled
              :key="index"
              :label="item.value"
              >{{ item.label }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <el-form-item label="过敏史" prop="allergicHistory">
          <el-input
            v-model="formData.allergicHistory"
            disabled
            type="textarea"
            placeholder="请输入过敏史"
            :autosize="{ minRows: 4, maxRows: 4 }"
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
        <el-form-item label="监护人姓名" prop="guardianName">
          <el-input
            v-model="formData.guardianName"
            disabled
            placeholder="请输入监护人姓名"
            clearable
            :style="{ width: '30%' }"
          >
          </el-input>
        </el-form-item>
      </el-row>
      <el-row :gutter="15">
        <p>体格检查</p>
        <el-col :span="8">
          <el-form-item label="体重" prop="weight">
            <el-input
              v-model="formData.weight"
              disabled
              placeholder="请输入"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="身高" prop="height">
            <el-input
              v-model="formData.height"
              disabled
              placeholder="请输入"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="皮肤" prop="skin">
            <el-input
              v-model="formData.skin"
              disabled
              placeholder="请输入"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <div class="flex">
            <el-form-item label="左眼" prop="leftEye">
              <el-input
                v-model="formData.leftEye"
                disabled
                placeholder="请输入"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
            <el-form-item label="左眼视力" prop="leftEyeVision">
              <el-input
                v-model="formData.leftEyeVision"
                disabled
                placeholder="请输入"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <el-form-item label="左耳" prop="leftEar">
            <el-input
              v-model="formData.leftEar"
              disabled
              placeholder="请输入"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="口腔牙齿数" prop="oralToothNum">
            <el-input
              v-model="formData.oralToothNum"
              disabled
              placeholder="请输入"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <div class="flex">
            <el-form-item label="右眼" prop="rightEye">
              <el-input
                v-model="formData.rightEye"
                disabled
                placeholder="请输入"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
            <el-form-item label="右眼视力" prop="rightEyeVision">
              <el-input
                v-model="formData.rightEyeVision"
                disabled
                placeholder="请输入"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <el-form-item label="右耳" prop="rightEar">
            <el-input
              v-model="formData.rightEar"
              disabled
              placeholder="请输入"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="口腔龋齿数" prop="decayedTeethNum">
            <el-input
              v-model="formData.decayedTeethNum"
              disabled
              placeholder="请输入"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="头颅" prop="head">
            <el-input
              v-model="formData.head"
              disabled
              placeholder="请输入"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="胸廓" prop="pleural">
            <el-input
              v-model="formData.pleural"
              disabled
              placeholder="请输入"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="脊柱四肢" prop="spineLimbs">
            <el-input
              v-model="formData.spineLimbs"
              disabled
              placeholder="请输入"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="咽部" prop="pharyngeal">
            <el-input
              v-model="formData.pharyngeal"
              disabled
              placeholder="请输入"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="心肺" prop="cardiopulmonary">
            <el-input
              v-model="formData.cardiopulmonary"
              disabled
              placeholder="请输入"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="肝脾" prop="liverSpleen">
            <el-input
              v-model="formData.liverSpleen"
              disabled
              placeholder="请输入"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="外生殖器" prop="externalGenitalia">
            <el-input
              v-model="formData.externalGenitalia"
              disabled
              placeholder="请输入"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="其他" prop="physiqueOthers">
            <el-input
              v-model="formData.physiqueOthers"
              disabled
              placeholder="请输入"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <div>
            <p>检查结果</p>
            <el-col :span="8">
              <el-form-item label="血红蛋白（HB）" prop="hb">
                <el-input
                  v-model="formData.hb"
                  disabled
                  placeholder="请输入"
                  clearable
                  :style="{ width: '100%' }"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="丙氨酸氨基转移酶（ALT）" prop="alt">
                <el-input
                  v-model="formData.alt"
                  disabled
                  placeholder="请输入"
                  clearable
                  :style="{ width: '100%' }"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="其他" prop="examinationOthers">
                <el-input
                  v-model="formData.examinationOthers"
                  disabled
                  placeholder="请输入"
                  clearable
                  :style="{ width: '100%' }"
                >
                </el-input>
              </el-form-item>
            </el-col>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-form-item label="检查结果" prop="checkResult">
          <el-input
            v-model="formData.checkResult"
            disabled
            type="textarea"
            placeholder="请输入检查结果"
            :autosize="{ minRows: 4, maxRows: 4 }"
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
        <el-form-item label="医生意见" prop="doctorAdvice">
          <el-input
            v-model="formData.doctorAdvice"
            disabled
            type="textarea"
            placeholder="请输入医生意见"
            :autosize="{ minRows: 4, maxRows: 4 }"
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
      </el-row>
      <el-row :gutter="15">
        <el-col :span="8">
          <el-form-item label="医生姓名" prop="doctorName">
            <el-input
              v-model="formData.doctorName"
              disabled
              placeholder="请输入医生姓名"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="体检日期" prop="physicalDate">
            <el-date-picker
              disabled
              clearable
              size="small"
              v-model="formData.physicalDate"
              type="date"
              value-format="yyyy-MM-dd "
              placeholder="请选择体检日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="检查单位" prop="hospitalName">
            <el-input
              v-model="formData.hospitalName"
              disabled
              placeholder="请输入检查单位"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item
        size="large"
        v-if="!isDetailDisabled"
        style="text-align: right"
      >
        <!-- <el-button type="primary" @click="submitForm">提交</el-button> -->
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { addHealthList,healthListInfo } from "@/api/mindSystem/studenthealth.js";
export default {
  components: {},
  dicts: ["sys_user_sex", "past_history"],
  data() {
    return {
      isDisabled: false,
      isDetailDisabled: false,
      formData: {
        schoolCode: null,
        censusRegister: "",
        idCard: "",
        schoolName: "",
        motherName: "",
        motherPhone: "",
        name: "",
        sex: "",
        birthday: "",
        pastHistory: "",
        allergicHistory: "",
        guardianName: "",
        weight: "",
        height: "",
        field132: "",
        field133: "",
        leftEar: "",
        oralToothNum: "",
        rightEar: "",
        decayedTeethNum: "",
        head: "",
        leftEye: "",
        leftEyeVision: "",
        pleural: "",
        spineLimbs: "",
        pharyngeal: "",
        checkResult: "",
        doctorAdvice: "",
        doctorName: "",
        physicalDate: "",
        hospitalName: "",
        middle: "",
      },
      rules: {
        physicalDate: [
          { required: true, message: "体检日期不能为空", trigger: "blur" },
        ],
        weight: [{ required: true, message: "体重不能为空", trigger: "blur" }],
        height: [{ required: true, message: "身高不能为空", trigger: "blur" }],
      },
      id:this.$route.query.id
    };
  },
  created() {
    this.healthListInfo()
  },
  mounted() {},
  methods: {
    async healthListInfo(){
      const {data,code,msg} = await healthListInfo(this.id)
      if(code == 200){
        this.formData = data
      }else{
        this.$message.error(msg)
      }
    },
    resetForm(){
      this.$router.go(-1)
    }
  },
};
</script>
<style lang="scss" scoped>
.check-list {
  padding: 5px 30px;
  box-sizing: border-box;
  background-color: #f2f3f5;
  .el-row {
    background-color: #fff;
    margin: 20px 0;
    padding: 20px;
    border-radius: 5px;
    .el-col {
      .el-date-editor {
        width: 100%;
      }
    }
    .flex {
      display: flex;
    }
  }
  ::v-deep .el-form-item {
    display: flex;
    flex-direction: column;
    .el-form-item__label {
      width: 100% !important;
      text-align: left;
    }
    .el-form-item__content {
      margin-left: 0 !important;
    }
  }
}
</style>
